<template>
  <view class="box1">
    <view
      @click="goDetail(item)"
      class="box_item"
      v-for="(item, index) in list"
      :key="index"
      :style="{
        background: bgColor,
      }"
    >
      <view class="title" v-if="item.user">
        <image
          :src="item.user.avatar_url"
          mode=""
          @click.stop="goHome(item.user.user_id)"
        ></image>
        <text
          :style="{
            color: color1,
          }"
          >{{ item.user.nick_name }}</text
        >
      </view>
      <view class="all_detail">
        <view class="card_content_box">
          <view
            class="item_title"
            :style="{
              color: color1,
              marginTop: '20rpx',
            }"
          >
            {{ item.title }}
          </view>
          <view
            class="item_content"
            :style="{
              color: color,
            }"
            v-html="item.content"
          >
            <!-- {{ item.content }} -->
          </view>
          <view
            class="card_content_box_preview"
            v-if="my_level_id < item.grade_auth"
            @click.stop="goMember"
          >
            该内容仅支持{{
              item.grade_auth == 1
                ? "元气驿站"
                : item.grade_auth == 2
                ? "启初梦谷"
                : item.grade_auth == 3
                ? "青空天台"
                : item.grade_auth == 4
                ? "无极云顶"
                : item.grade_auth == 5
                ? "返朴归源"
                : ""
            }}及以上行者查看
          </view>
        </view>

        <view
          class="time"
          :style="{
            color: color1,
          }"
        >
          {{ item.create_time }}
        </view>
      </view>

      <!-- 预览样式 -->
      <!-- <view class="Preview_style" v-else @click.stop="goMember">
        该内容仅支持{{
          item.grade_auth == 1
            ? "元气驿站"
            : item.grade_auth == 2
            ? "启初梦谷"
            : item.grade_auth == 3
            ? "青空天台"
            : item.grade_auth == 4
            ? "无极云顶"
            : item.grade_auth == 5
            ? "返朴归源"
            : ""
        }}及以上行者查看
      </view> -->
    </view>

    <view class="empty_view" v-if="(list && list.length == 0) && type != 'my'">
      <image
        class="item_left_clickable"
        src="../static/images/my/kong.png"
        mode=""
      ></image>
      <view>暂时还没有相关信息~</view>
    </view>


    <u-modal
      :show="show"
      :title="'提示'"
      :content="'您还不是行者身份，无法参与共创若想要参与共创需要开通行者身份！'"
      :showCancelButton="true"
      confirmText="去开通"
      cancelText="取消"
      confirmColor="#55B877"
      @confirm="submit"
      @cancel="show = false"
    ></u-modal>
  </view>
</template>

<script>
export default {
  props: {
    isInput: {
      type: Boolean,
      default: false,
    },
    bgColor: {
      type: String,
      default: "#f7f8fa",
    },
    color: {
      type: String,
      default: "#444",
    },
    color1: {
      type: String,
      default: "#888",
    },
    type: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    source: {
      type: String,
      default: "wei",
    },
    my_level_id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      list2: [
        {
          url: "",
          title: "水熙涵",
          content: "净推荐值(NPS),亦可称口碑,是一种计量客户向其他人推荐",
          time: "2023年09月06日",
        },
        {
          url: "",
          title: "华新建",
          content: "净推荐值（NPS），亦可称口碑，是一种计量客户向其他人推荐",
          time: "2023年09月07日",
        },
        {
          url: "",
          title: "华新建",
          content: "净推荐值（NPS），亦可称口碑，是一种计量客户向其他人推荐",
          time: "2023年09月07日",
        },
        {
          url: "",
          title: "华新建",
          content: "净推荐值（NPS），亦可称口碑，是一种计量客户向其他人推荐",
          time: "2023年09月07日",
        },
      ],
      show: false,
      value: "",
    };
  },
  methods: {
    confirm() {
      // console.log("eeeeee");
      if (this.isInput) {
        this.show = true;
      }
    },
    submit() {
      uni.navigateTo({
        url: "/pages/member/index",
      });
    },
    // 跳会员页面
    goMember() {
      uni.navigateTo({
        url: `/pages/member/index`,
      });
    },
    // 去个人主页
    goHome(user_id) {
      uni.navigateTo({
        url: `/pages/home/home?user_id=${user_id}`,
      });
    },
    // 去游记详情页
    goDetail(item) {
      if (this.source == "wei") {
        uni.navigateTo({
          url: `/pages/detail/flyDetail?detailType=youji&currentId=${item.id}&from=wei&type=${this.type}&title=${item.title}`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/detail/coCreateFly?id=${item.id}`,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.box1 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 32rpx;
  .box_item {
    width: 100%;
    padding: 32rpx;
    margin-bottom: 32rpx;
    box-sizing: border-box;
    background: #f7f8fa;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .all_detail {
      .card_content_box {
        position: relative;
        min-height: 144rpx;
        .card_content_box_preview {
          color: #eeeeee;
          padding-top: 30rpx;
          box-sizing: border-box;
          position: absolute;
          top: 0;
          background: linear-gradient(
            360deg,
            rgba(48, 53, 77, 1) 65%,
            rgba(49, 57, 79, 0) 100%
          );
          text-align: center;
          width: 100%;
          height: 100%;
        }
      }
    }
    .Preview_style {
      width: 100%;
      height: 114rpx;
      border-radius: 16rpx;
      // background: rgba(105, 113, 151, 0.7);
      margin-top: 24rpx;
      text-align: center;
      line-height: 114rpx;
      // color: white;
    }
    .title {
      width: 100%;
      display: flex;
      align-items: center;

      image {
        width: 56rpx;
        height: 56rpx;
        border-radius: 50%;
      }

      text {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #888888;
        margin-left: 16rpx;
      }
    }
  }

  .item_content {
    width: 100%;
    margin-top: 16rpx;
    font-size: 30rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #444444;
  }

  .time {
    margin-top: 16rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #888888;
  }

  .inp {
    margin-top: 40rpx;
    height: 88rpx;
    background: #eeeeee;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
  }
}

.empty_view {
  margin-top: 300rpx;
  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }
  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}
</style>